<template>
  <div
    v-loading="listLoading"
    element-loading-text="资源加载中"
    element-loading-spinner="el-icon-loading"
  >
    <div class="head-bg">
      <el-image :src="headBg" fit="cover"></el-image>
    </div>
    <div class="content-container">
      <div class="content">
        <div class="screen-container">
          <RouterSelectStrip
            :active-id.sync="queryParams.domainId"
            :screenList="positionList"
            label="研究领域"
            @itemClick="positionItemClick"
          />
          <DashLine />
          <RouterSelectStrip
            :active-id.sync="queryParams.location"
            :screenList="addressList"
            label="所在区域"
            @itemClick="addressItemClick"
          />
        </div>

        <div class="search-container">
          <div class="search-box">
            <el-input placeholder="请输入专家姓名" v-model="queryParams.name">
              <i slot="prefix" class="el-input__icon el-icon-search"></i>
              <span class="search-btn" slot="append" @click="getList(1)">
                搜索
              </span>
            </el-input>
          </div>
          <el-button
            :disabled="isCanReset"
            type="primary"
            class="ml-4"
            @click="resetSearch"
          >
            重置搜索
          </el-button>
        </div>

        <div class="info-list">
          <div
            v-for="item in list"
            :key="item.id"
            class="item"
            @click="hadleItemClick(item)"
          >
            <div class="head">
              <span class="title"> {{ item.name }} </span>
              <span class="sub"> {{ item.diploma }} </span>
            </div>

            <div class="main">
              <div class="label">专业:</div>
              <div>
                {{ item.specialty }}
              </div>
            </div>

            <div class="main">
              <div class="label">单位:</div>
              <div>
                {{ item.unitName }}
              </div>
            </div>
            <div class="main">
              <div class="label">领域:</div>
              <div>{{ filedDictName(item.domainId) }}</div>
            </div>
            <div class="main">
              <div class="label">地区:</div>
              <div>{{ item.location }}</div>
            </div>
          </div>
          <div
            v-if="list.length <= 0"
            class="  w-full py-8 text-xl text-center text-gray-500"
          >
            暂无数据
          </div>
        </div>
        <pagination
          v-show="tableTotal > 0"
          :total="tableTotal"
          :page.sync="queryParams.pageNum"
          :limit.sync="queryParams.pageSize"
          :pageSizes="[10, 12, 20, 30, 40]"
          @pagination="getList"
        />
      </div>
    </div>
  </div>
</template>

<script>
import { getSpecialist } from '@/api/expert'

import RouterSelectStrip from '@/components/HeadScreenStrip/RouterSelectStrip.vue'
import { getProvinceList } from '@/api/getProvince'
export default {
  name: 'expertBase',
  components: {
    RouterSelectStrip,
  },
  computed: {
    isCanReset() {
      let query = this.queryParams
      let { name, domainId, location } = query
      return !name && !domainId && !location
    },
    filedDictName() {
      return (fileValue) => {
        let findItem = {}
        findItem = this.positionList.find(
          (item) => parseInt(item.dictValue) === parseInt(fileValue)
        )
        if (findItem) {
          return findItem['dictLabel'] ? findItem['dictLabel'] : '无'
        }
        return ''
      }
    },
  },
  data() {
    return {
      headBg: require('@/assets/page-head/expert.png'),
      positionDictName: 'user_common_field',
      positionList: [],
      addressList: [],
      listLoading: false,
      tableTotal: 0,
      // 表格数据
      list: [],
      queryParams: {
        pageNum: 1,
        pageSize: 12,
        name: undefined,
        domainId: undefined,
        location: undefined,
        // serialNumber: undefined,
        // money: undefined,
        // title: undefined,
      },
    }
  },
  watch: {
    '$route.query': {
      handler(v) {
        this.startRequest(v)
      },
    },
  },
  created() {
    this.startRequest()
    this.initDictList()
  },
  methods: {
    initDictList() {
      this.getDictList(this.positionDictName).then((res) => {
        if (res.code == 200) {
          this.positionList = res.data
        }
      })
      getProvinceList().then((res) => {
        if (res.code == 200) {
          let addressTypeList = res.data.map((item) => {
            let tempObj = item
            tempObj.dictValue = item.id
            tempObj.dictLabel = item.name
            return tempObj
          })
          this.addressList = addressTypeList
        }
      })
    },

    // 获取 技术专家
    getList(isRestSearch) {
      this.listLoading = true
      if (isRestSearch == 1) {
        this.queryParams.pageNum = 1
      }
      let { pageNum, name, domainId, location } = this.queryParams

      this.$router.push({
        path: '/techSource/expertBase',
        query: {
          pN: pageNum,
          name: name,
          dId: domainId,
          loId: location,
        },
      })
    },
    // 整理 请求参数
    // 将 router 中 筛选参数  与 本地参数 结合
    manageQuery(sourceQuery) {
      let { pN, name, dId, loId } = this.$route.query
      pN = pN && parseInt(pN) ? parseInt(pN) : 1
      let queryParams = {
        pageNum: pN,
        name: name,
        domainId: dId,
        location: loId,
      }
      if (sourceQuery && sourceQuery.pageNum) {
        queryParams = sourceQuery
      }
      queryParams = { ...this.queryParams, ...queryParams }
      this.listLoading = true
      if (!queryParams || !queryParams?.pageSize || !queryParams?.pageNum) {
        this.$message({
          type: 'error',
          message: '搜索条件出错',
        })
        this.listLoading = false
        // this.resetSearch()
        return
      }
      for (const key in queryParams) {
        if (Object.hasOwnProperty.call(queryParams, key)) {
          const element = queryParams[key]
          this.queryParams[key] = element
        }
      }
      return queryParams
    },
    // 发起数据列表请求
    startRequest(sourceQuery) {
      let queryParams = this.manageQuery(sourceQuery)
      this.listLoading = true
      getSpecialist(queryParams)
        .then((res) => {
          if (res.code == 200) {
            this.list = res.rows
            this.tableTotal = res.total
          }
          this.listLoading = false
        })
        .finally(() => {
          this.listLoading = false
        })
    },
    resetSearch() {
      this.queryParams.name = undefined
      this.queryParams.domainId = undefined
      this.queryParams.location = undefined
      this.getList(1)
    },
    positionItemClick(activeItem) {
      // console.log('所在领域域点击', activeItem)
      // this.queryParams.domainId = activeItem.dictValue
      this.getList(1)
    },
    addressItemClick(activeItem) {
      // console.log('区域点击', activeItem)
      // this.queryParams.location = activeItem.dictValue
      this.getList(1)
    },
    hadleItemClick(item) {
      let id = item.id
      this.$router.push({ name: 'expertBaseDetail', params: { id } })
    },
  },
}
</script>

<style lang="scss" scoped>
.content-container {
  .content {
    width: 1200px;
    margin: auto;
    overflow: hidden;

    .screen-container {
      margin-top: 25px;
      background-color: #f6f9ff;
    }
    .search-container {
      display: flex;
      align-items: center;
      padding: 1rem;
      margin-top: 25px;
      background-color: #f6f9ff;

      .search-box {
        width: 560px;
        ::v-deep .el-input-group__append {
          background-color: #409eff;
          cursor: pointer;
        }
        .search-btn {
          background-color: #409eff;
          color: #fff;
        }
      }
    }

    .info-list {
      // display: flex;
      // flex-flow: row wrap;
      // justify-content: space-between;
      @apply grid grid-cols-3 gap-2;
      min-height: 10rem;
      margin: 25px 0;

      .item {
        display: flex;
        flex-flow: column nowrap;
        justify-content: space-around;
        // width: 388px;
        min-height: 214px;

        padding: 15px;
        margin-top: 10px;
        transition: 300ms ease all;
        box-shadow: 0px 3px 5px #d1d9e6, 0px -3px 5px #fff;

        border-radius: 5px;
        border: solid 1px #efefef;
        background-color: #fff;
        cursor: pointer;
        .head {
          height: 4rem;
          line-height: 4rem;
          .title {
            font-size: 20px;
            font-weight: bold;
          }
          .sub {
            font-size: 12px;
            font-weight: 400;
            text-align: left;
            color: #1678ff;
          }
        }
        .main {
          display: flex;
          flex-flow: row nowrap;
          padding: 0.3rem 0;
          color: #606266;
          .label {
            font-weight: bold;
            min-width: 4rem;
            color: #000;
          }
        }
      }
    }
    .pagination-container {
      height: 5rem;
      line-height: 5rem;
    }
  }
}
</style>
